/**
 * 学习目标：使用Switch
 * 
+ 通常，👍 我们会把`Route`包裹在一个`Switch`组件中。

+ 在`Switch`组件中，匹配到第一个匹配的组件，停止向下匹配。
+ `<Route>`不写`path`，配合`<Switch>` 实现404页面的提示
 */
import React, { Component } from 'react'
import { HashRouter, Route, Link, BrowserRouter as Router, NavLink, Switch } from 'react-router-dom';

// 引入样式
import './index.css'

export default class App extends Component {

    render() {
        return (
            <Router>
                <div>
                    <h1>app组件</h1>
                    {/* 首页 */}
                    <Link to="/home">首页</Link>
                    <div>
                        <NavLink activeClassName='my-active' to="/home">跳到Home</NavLink>
                        <br />
                        <NavLink activeClassName='my-active' to="/my">跳到我的音乐</NavLink>
                        <br />
                        <NavLink activeClassName='my-active' to="/friend">跳到朋友</NavLink>
                    </div>
                    {/* 推荐使用Route都包裹在Switch组件 */}
                    <Switch>
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Home} />
                        <Route path="/my" component={MyMusic} />
                        <Route path="/friend" component={Friend} />
                        <Route path="/" component={Friend} />
                        {/* 注意 path不可用来处理404页面，注意放在最下面 */}
                        <Route component={NoMatch} />
                    </Switch>
                </div>
            </Router>
        )
    }
}
function Home() {
    return <div>home</div>
}
function MyMusic() {
    return <div>MyMusic</div>
}
function Friend() {
    return <div>Friend</div>
}
function NoMatch() {
    return <div>404</div>
}